<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Dialog</title>
</head>

<body>
    <dialog id="my_dialog">
        <h1>这个是对话框的内容</h1>
        <p>确定 or 取消</p>
        <form method="dialog">
            <button type="submit" value="ok">确定</button>
            <button type="submit" value="cancle">取消</button>
        </form>
    </dialog>
    <div id="content">
        <button id="show_dialog">点击弹出对话框</button>
    </div>
    <style type="text/css">
        dialog {
            border: none;
            border-radius: 8px;
            box-shadow: 0px 0px 8px 4px #c8cbcf;
        }

        dialog::backdrop {
            background-color: lightgray;
            opacity: 0.65;
        }
    </style>
    <script>
        const dialog = document.querySelector('#my_dialog');
        const btn = document.querySelector('#show_dialog');
        btn.addEventListener('click', function (e) {
            dialog.showModal();
        });

        dialog.addEventListener("close", function(e){
            alert(dialog.returnValue);
        })

    </script>
</body>

</html>